<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/style1.css" />
		<style type="text/css">
			.m-icon-bluev {
				display: inline-block;
				width: 10px;
				height: 10px;
				background-color: #939634;
				position: absolute;
				left: 28px;
				bottom: 13px;
			}
			
			.tianjian:before {
				width: 24px;
				height: 48px;
				position: absolute;
				bottom: 0;
				right: 10px;
				background: url('images/iconfont-tianjia.png') no-repeat bottom right /24px 48px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
			}
			
			
			
			/*.mui-slider {
				margin-top: 50px;
			}*/
		</style>
	</head>

	<body>
		<!--固定栏，前置-->
		<header class="mui-bar mui-bar-nav" id="header">
			<h1 class="mui-title white-big touxiang" ><i class="hps-logo"></i>黑皮书</h1>
			<a class="mui-pull-right tianjian" id="listedit" onclick="toAddList()"></a>
		</header>
		

		<nav class="mui-bar mui-bar-tab" id="footer">
			<a class="mui-tab-item mui-active" href="portal.html" >
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">黑皮书</span>
			</a>
			<a class="mui-tab-item" id="personpage" href="person1.html">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
			
			<a class="mui-tab-item" id="personpage" href="html/care/care_main.html">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">测试</span>
			</a>
		</nav>
		
		<div class="mui-content"></div>



		<!--内容盒子结束-->

		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/config.js" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			/*浏览器的兼容处理方法*/
			var createIframe = function (el, opt) {
			    var elContainer = document.querySelector(el);
			    var wrapper = document.querySelector(".mui-iframe-wrapper");
			    if(!wrapper){
			        // 创建wrapper 和 iframe
			        wrapper = document.createElement('div');
			        wrapper.className = 'mui-iframe-wrapper';
			        for(var i in opt.style){
			            wrapper.style[i] = opt.style[i];
			        }
			        var iframe = document.createElement('iframe');
			        iframe.src = opt.url;
			        iframe.id = opt.id || opt.url;
			        iframe.name = opt.id;
			        wrapper.appendChild(iframe);
			        elContainer.appendChild(wrapper);
			    }else{
			        var iframe = wrapper.querySelector('iframe');
			        iframe.src = opt.url;
			        iframe.id = opt.id || opt.url;
			        iframe.name = iframe.id;
			    }
			}
			
			// mui初始化
			mui.init();
			
			// visit
			
			var subpages = ['portal.html', 'person1.html', 'html/care/care_main.html'];
			var subpage_style = {
				top: '44px',
				bottom: '51px'
			};
			var aniShow = {};
			// 当前激活选项
			var activeTab = subpages[0];
//			var title = document.getElementById("title");
			
			if(mui.os.plus){
				// 创建子页面，首个选项卡页面显示，其它均隐藏；
				mui.plusReady(function() {
					var self = plus.webview.currentWebview();
					for (var i = 0; i < 4; i++) {
						var temp = {};
						var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
						if (i > 0) {
							sub.hide();
						}else{
							temp[subpages[i]] = "true";
							mui.extend(aniShow,temp);
						}
						self.append(sub);
					}
				});
			}else{
				// 创建iframe代替子页面
		        createIframe('.mui-content',{
		            url: activeTab,
		            style: subpage_style
		        });
			}
			
			// 选项卡点击事件
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var targetTab = this.getAttribute('href');
				
				if (targetTab == activeTab) {return;}
				//更换标题
//				title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
				//显示目标选项卡
				if(mui.os.plus){
					//若为iOS平台或非首次显示，则直接显示
					if(mui.os.ios||aniShow[targetTab]){
						plus.webview.show(targetTab);
					}else{
						//否则，使用fade-in动画，且保存变量
						var temp = {};
						temp[targetTab] = "true";
						mui.extend(aniShow,temp);
						plus.webview.show(targetTab,"fade-in",300);
					}
					//隐藏当前;
					plus.webview.hide(activeTab);
				}else{
					// 创建iframe代替子页面
			        createIframe('.mui-content',{
			            url: targetTab,
			            style: subpage_style
			        });
				}
				//更改当前活跃的选项卡
				activeTab = targetTab;
			});
		</script>
	</body>

</html>